<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<script>
    $(function () {
        $('#left').click(function () {
            var a = $('#pageNum').val();
            a = parseInt(a);
            if (a > 1) {
                $('#pageNum').val(a - 1);
                $('#form').submit();
                $('#left').removeAttr("class");
            }
        });

        $('#right').click(function () {
            var a = $('#pageNum').val();
            a = parseInt(a);
            $('#pageNum').val(a + 1);
            $('#form').submit();
        });


        $('#page li').click(function () {
            var a = $(this).children().html();
            if (a.length > 3) {
                return;
            }
            $('#pageNum').val(a);
            $('#form').submit();
        });
    });
</script>
<nav aria-label="...">
    <ul id="page" class="pagination">
        <li id="left" class="disabled "><a href="#" aria-label="Previous"><span aria-hidden="true"></span>&laquo;</a></span>
        </li>
        <c:choose>
            <c:when test="${num >=3}">
                <c:forEach var="x" step="1" end="${num+2}" begin="${num-2}">
                    <c:choose>
                        <c:when test="${x eq num}">
                            <li class="active"><a href="#">${x}</a>
                            </li>
                        </c:when>
                        <c:otherwise>
                            <li><a href="#">${x}</a></li>
                        </c:otherwise>
                    </c:choose>
                </c:forEach>
            </c:when>
            <c:when test="${num eq 2}">
                <c:forEach var="x" step="1" end="${num+3}" begin="${num-1}">
                    <c:choose>
                        <c:when test="${x eq num}">
                            <li class="active"><a href="#">${x}</a>
                            </li>
                        </c:when>
                        <c:otherwise>
                            <li><a href="#">${x}</a></li>
                        </c:otherwise>
                    </c:choose>
                </c:forEach>
            </c:when>
            <c:otherwise>
                <c:forEach var="x" step="1" end="${num+4}"
                           begin="${num}">
                    <c:choose>
                        <c:when test="${x eq num}">
                            <li class="active"><a href="#">${x}</a>
                            </li>
                        </c:when>
                        <c:otherwise>
                            <li><a href="#">${x}</a></li>
                        </c:otherwise>
                    </c:choose>
                </c:forEach>
            </c:otherwise>
        </c:choose>
        <li id="right"><a href="#" aria-label="Next"><span aria-hidden="true"></span>&raquo;</a></li>
    </ul>
</nav>